// 动画效果工具

// 创建星星特效
export function createStarEffect(x: number, y: number, container?: HTMLElement) {
  const target = container || document.body
  const starCount = 10

  for (let i = 0; i < starCount; i++) {
    const star = document.createElement('div')
    star.className = 'star-particle'
    star.textContent = '⭐'
    star.style.cssText = `
      position: fixed;
      left: ${x}px;
      top: ${y}px;
      font-size: 24px;
      pointer-events: none;
      z-index: 9999;
      animation: star-burst 1s ease-out forwards;
      animation-delay: ${i * 0.05}s;
    `

    // 随机方向
    const angle = (Math.PI * 2 * i) / starCount
    const distance = 100 + Math.random() * 50
    const tx = Math.cos(angle) * distance
    const ty = Math.sin(angle) * distance

    star.style.setProperty('--tx', `${tx}px`)
    star.style.setProperty('--ty', `${ty}px`)

    target.appendChild(star)

    setTimeout(() => {
      star.remove()
    }, 1500)
  }
}

// 创建庆祝特效
export function createCelebrationEffect(container?: HTMLElement) {
  const target = container || document.body
  const emojis = ['🎉', '🎊', '✨', '🌟', '💫', '⭐']
  const count = 20

  for (let i = 0; i < count; i++) {
    const particle = document.createElement('div')
    particle.className = 'celebration-particle'
    particle.textContent = emojis[Math.floor(Math.random() * emojis.length)]
    particle.style.cssText = `
      position: fixed;
      left: ${Math.random() * 100}%;
      top: -50px;
      font-size: ${20 + Math.random() * 20}px;
      pointer-events: none;
      z-index: 9999;
      animation: fall ${2 + Math.random() * 2}s linear forwards;
      animation-delay: ${i * 0.1}s;
    `

    target.appendChild(particle)

    setTimeout(() => {
      particle.remove()
    }, 5000)
  }
}

// 创建错误提示动画（温柔的摇晃）
export function createShakeEffect(element: HTMLElement) {
  element.classList.add('shake-gentle')
  setTimeout(() => {
    element.classList.remove('shake-gentle')
  }, 500)
}

// 创建脉冲效果
export function createPulseEffect(element: HTMLElement) {
  element.classList.add('pulse')
  setTimeout(() => {
    element.classList.remove('pulse')
  }, 600)
}

// 创建弹跳效果
export function createBounceEffect(element: HTMLElement) {
  element.classList.add('bounce')
  setTimeout(() => {
    element.classList.remove('bounce')
  }, 1000)
}

// 添加全局动画样式
export function injectAnimationStyles() {
  if (document.getElementById('game-animations')) return

  const style = document.createElement('style')
  style.id = 'game-animations'
  style.textContent = `
    @keyframes star-burst {
      0% {
        transform: translate(0, 0) scale(0) rotate(0deg);
        opacity: 1;
      }
      100% {
        transform: translate(var(--tx), var(--ty)) scale(1.5) rotate(360deg);
        opacity: 0;
      }
    }

    @keyframes fall {
      0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
      }
      100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
      }
    }

    @keyframes shake-gentle {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-10px); }
      75% { transform: translateX(10px); }
    }

    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.1); }
    }

    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      25% { transform: translateY(-20px); }
      50% { transform: translateY(0); }
      75% { transform: translateY(-10px); }
    }

    .shake-gentle {
      animation: shake-gentle 0.5s ease-in-out;
    }

    .pulse {
      animation: pulse 0.6s ease-in-out;
    }

    .bounce {
      animation: bounce 1s ease-in-out;
    }
  `
  document.head.appendChild(style)
}
